<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<!--				<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>-->
				<!--				<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0"-->
				<!--						   @click="batch_del"></el-button>-->
				<div class="right-panel-search">
					<el-input v-model="search.keyword" placeholder="角色名称" clearable></el-input>
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
				</div>
			</div>
			<div class="right-panel">
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :data="tableData" row-key="id" @selection-change="selectionChange"
					 @getTableData="getTableData">
				<!--				<el-table-column type="selection" width="50"></el-table-column>-->
				<el-table-column label="ID" prop="id" width="150"></el-table-column>
				<el-table-column label="角色名称" prop="name" width="250"></el-table-column>
				<el-table-column label="更新时间" prop="updateDatetime" width="180"></el-table-column>
				<el-table-column label="操作" fixed="right" width="270">
					<template #default="scope">
						<el-button-group>
							<el-button text type="primary" size="small"
									   @click="dialogLoginTime(scope.row, scope.$index)">
								登录时间设定
							</el-button>
						</el-button-group>
					</template>
				</el-table-column>

			</scTable>
		</el-main>
	</el-container>

	<el-dialog
		v-model="dialogVisible"
		title="登录时间设定"
		width="50%"
		:before-close="handleClose"
		filterable>
		<el-form :model="form" ref="dialogForm" label-width="100px">
			<el-form-item label="日期" prop="roleTime">
				<el-checkbox :disabled="form.name === '超级管理员' ||  form.name === '部门管理员'" v-model="form.weekdayFlag"
							 label="只工作日登录" size="large"/>

				<!--				<el-radio-group :disabled="form.roleName === '管理员'" v-model="form.roleTime" class="ml-4">-->
				<!--					<el-radio label="1" size="large">全天登录</el-radio>-->
				<!--					<el-radio label="2" size="large">只工作日登录</el-radio>-->
				<!--				</el-radio-group>-->
			</el-form-item>
			<el-form-item label="时间" prop="name">
				<!--				<el-time-picker v-model="form.startTime" placeholder="起始时间"/>-->
				<!--				<el-time-picker v-model="form.endTime" placeholder="结束时间"/>-->
				<el-time-picker
					v-model="formTime"
					is-range
					:disabled="form.name === '超级管理员' ||  form.name === '部门管理员'"
					range-separator="至"
					start-placeholder="起始时间"
					end-placeholder="结束时间"
					@change="timeChange"
				/>
			</el-form-item>
			<template #footer>
				<el-button @click="visible=false">取 消</el-button>
				<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
			</template>
		</el-form>

		<template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitRelApi">确定</el-button>
      </span>
		</template>
	</el-dialog>

	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess"
				 @closed="dialog.save=false"></save-dialog>

</template>

<script>
	import saveDialog from './save'
	import {addOrUpdate, getRoleList} from "@/api/model/role";

	export default {
		name: 'role',
		components: {
			saveDialog
		},
		data() {
			return {
				form: {
					weekdayFlag: false,
					name: '',
					loginTimeRangeEnd: '',
					loginTimeRangeStart: '',
				},
				formTime: '',
				dialogVisible: false,
				dialog: {
					save: false
				},
				apiObj: this.$API.system.dept.list,
				tableData: [],
				selection: [],
				pageNum: 1,
				pageSize: 10,
				total: 0,
				search: {
					keyword: null
				},
				apiList: [],
				relApiList: [],
				relDeptId: '',
			}
		},
		created() {
			this.init()
		},
		methods: {
			timeChange(v) {
				if (v) {
					this.form.loginTimeRangeStart = this.$TOOL.dateFormat(v[0], 'hh:mm:ss');
					this.form.loginTimeRangeEnd = this.$TOOL.dateFormat(v[1], 'hh:mm:ss');
					console.log('数据更新  ：' + JSON.stringify(this.form))
				}
			},
			submitRelApi() {
				addOrUpdate(this.form).then(res => {
					if (res.code === 200) {
						this.$message.success("设置成功！")
						this.dialogVisible = false
						this.init()
					} else {
						this.$alert(res.msg, "提示", {type: 'error'})
					}
				})

			},
			dialogChange(value, direction, movedKeys) {
				console.log('aaaa');
				console.log(value.value);
				console.log(direction);
				console.log(movedKeys);
				console.log(this.relApiList);
				console.log('bbb');
			},
			dialogLoginTime(row) {
				this.form.id = row.id;
				// this.form.loginTimeRangeEnd = row.loginTimeRangeEnd;
				// this.form.loginTimeRangeStart = row.loginTimeRangeStart;
				this.form.name = row.name;
				this.form.weekdayFlag = row.weekdayFlag;
				this.formTime = row.time;

				this.form.loginTimeRangeStart = this.$TOOL.dateFormat(this.formTime[0], 'hh:mm:ss');
				this.form.loginTimeRangeEnd = this.$TOOL.dateFormat(this.formTime[1], 'hh:mm:ss');

				this.dialogVisible = true

			},
			getTableData(data) {
				this.pageNum = data.pageNum
				this.pageSize = data.pageSize
				this.init()
			},
			init() {
				getRoleList({pageNum: this.pageNum, pageSize: this.pageSize, name: this.search.keyword}).then(res => {
					console.log(res)
					res.data.list.forEach(e => {
						let temp = [];
						let time = e.loginTimeRange.split('-')
						let sj1 = time[0].split(':')
						let date1 = new Date()
						date1.setHours(sj1[0])
						date1.setMinutes(sj1[1])
						date1.setSeconds(sj1[2])
						temp[0] = date1


						let sj2 = time[1].split(':')
						let date2 = new Date()
						date2.setHours(sj2[0])
						date2.setMinutes(sj2[1])
						date2.setSeconds(sj2[2])
						temp[1] = date2

						e.time = temp;

					})
					this.tableData = res.data;
				})
			},
			//添加
			add() {
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.saveDialog.open()
				})
			},
			//编辑
			table_edit() {
				this.dialog.save = true
				this.$nextTick(() => {
					// getDeptById({'deptId': row.id}).then(res => {
					// 	this.$refs.saveDialog.open('edit').setData(res.data)
					// })
				})
			},
			//查看
			table_show() {
				this.dialog.save = true
				this.$nextTick(() => {
					// getDeptById({'deptId': row.id}).then(res => {
					// 	this.$refs.saveDialog.open('show').setData(res.data)
					// })
				})
			},
			//删除
			async table_del() {
				// deleteDept({'deptId': row.id}).then(res => {
				// 	if (res.code === 200) {
				// 		this.$message.success("删除成功")
				// 		this.init()
				// 	} else {
				// 		this.$alert(res.msg, "提示", {type: 'error'})
				// 	}
				// })
			},
			//批量删除
			async batch_del() {
				this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
					type: 'warning'
				}).then(() => {
					const loading = this.$loading();
					this.$refs.table.refresh()
					loading.close();
					this.$message.success("操作成功")
				}).catch(() => {

				})
			},
			//表格选择后回调事件
			selectionChange(selection) {
				this.selection = selection;
			},
			//搜索
			upsearch() {
				this.init()
			},
			//根据ID获取树结构
			filterTree(id) {
				var target = null;

				function filter(tree) {
					tree.forEach(item => {
						if (item.id == id) {
							target = item
						}
						if (item.children) {
							filter(item.children)
						}
					})
				}

				filter(this.$refs.table.tableData)
				return target
			},
			//本地更新数据
			handleSaveSuccess() {
				this.init();
				// if (mode == 'add') {
				// 	this.$refs.table.refresh()
				// } else if (mode == 'edit') {
				// 	this.$refs.table.refresh()
				// }
			}
		},
		watch: {
			// form: {
			// 	deep: true,
			// 	handler(v) {
			// 		console.log(v + '数据更新' + JSON.stringify(v))
			// 	}
			// },
		},
	}
</script>

<style>
	.el-date-editor {
		margin: 8px;
	}
</style>
